<template>
  <div id="app">
    <Header v-show="$route.meta.show"></Header>
    <el-container>
      <el-header style="height: 40px;">
        <!-- <h1 class="h1-title">我的订单</h1> -->
        <div class="location">
          <h2>我的订单</h2>
          <p>My Order</p>
        </div>
        <hr>
      </el-header>
      <el-main>
        <el-card v-for="(item) in orderInfo" :key="item.id" style="margin-bottom: 20px;">
          <el-row>
            <el-col :span="6">
              <div style="text-align: center;">
                <img :src="item.room_pic" alt="房间图片" style="max-width: 100%; max-height: 120px;">
              </div>
            </el-col>
            <el-col :span="18">
              <el-row style="margin-bottom: 10px;">
                <el-col :span="12">
                  <div style="font-size: 16px; font-weight: bold; color:red">名称：{{ item.hotel_title }}
                    <span style="margin-left: 15px;font-size: 12px;color:black">地址：{{item.hotel_address}}</span>
                  </div>

                  <div style="font-size: 14px; color: #666;">房间编号：{{ item.room_id }}</div>
                </el-col>
                <el-col :span="6">
                  <el-tag style="font-size: 16px; font-weight: bold; text-align: right;" :type="statusColor(item.orderState)">{{statusText(item.orderState)  }}</el-tag>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <div style="font-size: 14px;">入住人：</div>
                </el-col>
                <el-col :span="6">
                  <div style="font-size: 14px;">{{ item.name }}</div>
                </el-col>
                <el-col :span="6">
                  <div style="font-size: 14px;">电话：</div>
                </el-col>
                <el-col :span="6">
                  <div style="font-size: 14px;">{{ item.phone }}</div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <div style="font-size: 14px;">订单编号：</div>
                </el-col>
                <el-col :span="18">
                  <div style="font-size: 14px;">{{ item.orderID }}</div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <div style="font-size: 14px;">入住时间：</div>
                </el-col>
                <el-col :span="6">
                  <div style="font-size: 14px;">{{ $fromatDateAll(item.checkin_date) }}</div>
                </el-col>
                <el-col :span="6">
                  <div style="font-size: 14px;">退房时间：</div>
                </el-col>
                <el-col :span="6">
                  <div style="font-size: 14px;">{{ $fromatDateAll(item.checkout_date) }}</div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <div style="font-size: 14px;">总价：</div>
                </el-col>
                <el-col :span="18">
                  <div style="font-size: 14px; font-weight: bold; color: #f60;">¥ {{ item.total_price }}</div>
                </el-col>
                <el-col :span="24" style="text-align: right;">
                  <el-button v-if="item.orderState===0" type="danger" size="small"
                    style="margin-right: 10px;" @click="gotoPay(item)">支付</el-button>
                    <template>
                      <div>
                        <el-button v-else type="primary" size="small" disabled>已支付</el-button>
                        <el-button v-else type="primary" size="small"></el-button>
                      </div>
                    </template>

                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-card>
      </el-main>
    </el-container>
    <Footer v-show="$route.meta.show"></Footer>
  </div>
</template>

<script>
import Header from '@/components/Header/index.vue'
import Footer from '@/components/Footer/index.vue'
import { getOrderinfo } from '@/api/orderinfo'
import { goPayment } from '@/api/payment'
export default {
  name: 'HotelSystemMyOrder',
  components: {
    Header, Footer
  },
  data () {
    return {
      orderInfo: []

    }
  },

  mounted () {
    this.initOrder()
  },

  methods: {
    handleCancelOrder: function (index) {
      // 取消订单逻辑
      this.orders.splice(index, 1)
      this.$message({
        type: 'success',
        message: '取消订单成功'
      })
    },
    async initOrder () {
      const orderID = this.$store.state.userinfo.id
      const { data: res } = await getOrderinfo(orderID)
      this.orderInfo = res.data
    },
    // 渲染支付状态
    statusText (status) {
      switch (status) {
        case 0:
          return '未支付'
        case 1:
          return '待支付'
        case 2:
          return '已支付'
        default:
          return '未知状态'
      }
    },
    statusColor (status) {
      switch (status) {
        case 0:
          return 'danger' // 红色
        case 1:
          return 'warning' // 黄色
        case 2:
          return 'success' // 绿色
        default:
          return 'info' // 蓝色
      }
    },
    // 支付
    async gotoPay (obj) {
      this.$message.success('即将跳转，请等待')
      const { data: res } = await goPayment(obj)
      if (res.code === 200) {
        window.location.href = res.payUrl
      }
    }
    // 取消订单
  }
}
</script>

<style lang="less" scoped>
#app {
  margin: 20px;
  width: 1200px;
  margin: 0 auto;
}
.h1-title {
  margin-left: 10px;
}
.location {

  h2 {
    overflow: hidden;
    font-size: 30px;
    font-weight: 400;
    padding: 5px 10px 5px 25px;
    float: left;
  }

  h2::after {
    content: "";
    background-color: #01a1ff;
    display: block;
    width: 4px;
    height: 42px;
    margin-left: -10px;
    margin-top: -40px;
  }

  p {
    float: left;
    padding-top: 25px;
  }
}
hr {
  width: 1150px;
  background-color: black;
  margin: 10px auto;

}
.el-main {
  margin-top: 10px;
}
.el-row {
  margin: 5px;
}

.order-card {
  margin-bottom: 20px;
}

.order-card .el-row {
  margin-bottom: 10px;
}

.order-card .el-row:last-child {
  margin-bottom: 0;
}

.order-card .el-row .el-col {
  display: flex;
  align-items: center;
  span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

}

.order-card .el-row .el-col:first-child {
  flex: 2;
}

.order-card .el-row .el-col:last-child {
  flex: 3;
  justify-content: space-between;
}

.order-card .el-row .el-col .order-label {
  font-size: 14px;
  color: #666;
  margin-right: 10px;
}

.order-card .el-row .el-col .order-value {
  font-size: 14px;
  font-weight: bold;
}

.order-card .el-row .el-col .order-status {
  font-size: 16px;
  font-weight: bold;
  text-align: right;
}

.order-card .el-row .el-col .order-status.unpaid {
  color: #f60;
}
</style>
